<template>
  <div>
    <div class="getcomment">
      <div class="commenttitle commenttitle_1">
        <h3>提交评论</h3>
        <router-link to="/information" class="commentretu">返回</router-link>
      </div>
      <div class="getpublish">
        <textarea placeholder="请输入评论内容..." v-model="value"></textarea>
        <van-button type="info" class="getbtn" @click="publishFn"
          >发表</van-button
        >
      </div>
      <div class="commenttitle">
        <h3>评论列表</h3>
        <span>{{ total }}条评论</span>
      </div>
      <div class="commentlist">
        <div class="outwarp" v-for="(item, index) in commentLis" :key="index">
          <div class="content">{{ item.content }}</div>
          <div class="username">{{ item.user_name }}</div>
          <div class="addtime">{{ item.add_time | formatDate }}</div>
        </div>
      </div>

      <van-button plain type="danger" @click="toLoad">加载更多</van-button>
    </div>
  </div>
</template>

<script>
// import { getComments } from "../apis/user";
export default {
  data() {
    return {
      value: "",
    };
  },
  props: {
    commentLis: {
      type: Array,
      required: true,
    },
    total: Number,
  },
  methods: {
    // 加载更多的子传父事件
    toLoad() {
      this.$emit("toLoad");
    },
    // 发表评论的子传父事件
    publishFn() {
      if (this.value === "") {
        return this.$toast.fail("评论内容不能为空");
      }
      this.$emit("publish", this.value);
      this.value = "";
    },
  },
};
</script>

<style lang="less" scoped>
.van-button {
  width: 100%;
  font-size: 20px;
  border-radius: 5px;
}
.commenttitle_1 {
  border-bottom: 1px solid #c8c8cd;
}
.getcomment {
  margin-top: 60px;
  .commenttitle {
    height: 60px;
    // border-bottom: 1px solid #c8c8cd;
    padding: 10px 0 50px 10px;
    display: flex;
    h3 {
      width: 300px;
      font-size: 24px;
    }
    .commentretu {
      width: 100px;
      margin-top: 15px;
      text-decoration: none;
      color: #007aff;
    }
    span {
      font-size: 12px;
      padding-top: 10px;
    }
  }
  .getpublish {
    padding: 10px;
    border-bottom: 1px solid #c8c8cd;
    textarea {
      display: block;
      width: 100%;
      height: 100px;
      padding: 10px;
      font-size: 18px;
    }
    .getbtn {
      display: block;
      width: 100%;
      color: #fff;
      background-color: #26a2ff;
      border-radius: 4px;
      border: 0;
      font-size: 18px;
      height: 41px;
      overflow: hidden;
      position: relative;
      text-align: center;
      margin-top: 10px;
    }
  }
}
.commentlist {
  padding: 10px;
  padding-bottom: 50px;
  border-top: 1px solid #c8c8cd;
}
.commentlist .outwarp {
  font-size: 14px;
}
.commentlist .outwarp:nth-child(1n + 2) {
  clear: both;
  padding-top: 10px;
  border-top: 1px solid #c8c8cd;
}
.commentlist .content {
  margin-bottom: 10px;
  color: #5c5c5c;
}
.commentlist .username {
  width: 50%;
  float: left;
  color: #0094ff;
  padding: 10px 0 10px 0;
}
.commentlist .addtime {
  width: 50%;
  float: right;
  color: #5c5c5c;
  padding: 10px 0 10px 0;
}
</style>